<style lang='scss'>
    .addlabel-title{
        display: block;
        font-size: 13px;
        background-color: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #ddd;
        margin: 0 -10px 6px -12px;
    }
</style>
<template>
	<div>
        <div class="addlabel-title" v-if="$route.query.id">
            {{type === 'query' ? '发货地址管理 / 查看' : '发货地址管理 / 编辑'}}
        </div>
		<compWrapper title="基本信息" style="padding: 10px">
			<compFormQuery v-if=" type === 'query'" class="margin-top-15" :formdata="getBase" :value="formData"></compFormQuery>
            <compFormEdit v-else ref="formbase" class="margin-top-15" :formdata="getBase" v-model="formData"></compFormEdit>
		</compWrapper>
        <compWrapper title="操作历史" v-if=" type === 'query' ">
			<compLog class="margin-15" :data="opLogList" :columns="logcolumn"></compLog>
		</compWrapper>
		<div v-if="type != 'query'" class="text-right margin-top-10">
			<Button type="primary" @click="submit">保存</Button>
			<Button v-if="type != 'add'" class="margin-left-10" @click="onCancel">返回</Button>
		</div>
		<Spin v-if="loading" fix></Spin>
	</div>
</template>

<script>
import { HttpSaveShipperManage, HttpShipper } from '@/service/api/views';
import { mapGetters } from "vuex";
import mixins from '../mixin'

export default {
	props:['querytype','activeid', 'from'],
    mixins: [ mixins ],
	data() {
		return {
            type: this.querytype || this.$route.params.type,
            id: this.activeid || this.$route.query.id,
            sourceType: this.from || '',
            loading: false,
            formData: {
                active: 1,
            },
            opLogList: [],
		};
	},
	created() {
        this.getDetail();
	},
	computed: {
         ...mapGetters('dictionary',['getSysAllList', 'getCountryList']),
		getBase() {
			return [
                {
                    label: '发货方名称',
                    key: 'contactName',
                    tag: 'Input',
                },
                {
                    label: 'Ship Code',
                    key: 'code',
                    tag: 'Input',
                    query: this.type !== 'add',
                },
                {
                    label: "组织",
                    key: 'organizationId',
                    tag: 'Select',
                    options: this.getSysAllList
                },
                {
                    label: "国家",
                    key: 'countrycode',
                    tag: 'Select',
                    options: this.getCountryList
                },
                {
                    label: '州',
                    key: 'state',
                    tag: 'Input',
                },
                {
                    label: '城市',
                    key: 'city',
                    tag: 'Input',
                },
                {
                    label: '邮编',
                    key: 'zipcode',
                    tag: 'Input',
                },
                {
                    label: '联系电话',
                    key: 'contactPhone',
                    tag: 'Input',
                },
                {
                    label: '详细地址',
                    key: 'addressLine1',
                    tag: 'Input',
                },
                {
                    label: '详细地址2',
                    key: 'addressLine2',
                    tag: 'Input',
                    required: false,
                },
                {
                    label: "状态",
                    key: 'active',
                    render: (h)=>{
                        return <div>{this.formData.active == 1 ? '启用' : '停用'}</div>
                    },
                    show: this.type === 'query'
                },
                {
                    label: '备注',
                    key: 'remark',
                    tag: 'Input',
                    required: false,
                },
			];
		},
        logcolumn(){
            return [
                {
                    title: this.$ct('global.common.operate_time',{defaultValue:'操作时间'}),
                    key: 'createdAt',
                },
                {
                    title: this.$ct('global.common.operator',{defaultValue:'操作人'}),
                    key: 'createdName',
                },
                {
                    title: this.$ct('global.common.operate_type',{defaultValue:'操作类型'}),
                    render:(h,{row})=>{
                        return this.getLogActions[row.operateType] || '--';
                    }
                },
                {
                    title: '说明',
                    key: 'remark',
                },
            ]
        }
	},
	methods: {
        onCancel() {
            if(this.type == 'add'){
                this.$emit('on-update');
                this.$emit('on-close');
            }else{
                this.$router.push({
                    name: "tmsShippingAddressList"
                })
            }
		},
		getDetail() {
			if (this.type === "add") return;
			this.loading = true;
			HttpShipper({
				id: this.id,
			}).then(res => {
                this.formData = res.data;
                this.opLogList = res.data.orderLogsEntityList;
                this.loading = false;
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			});
		},
		async submit() {
			const valid = await this.$refs.formbase.validate();
			if (!valid) return;
			this.loading = true;
			HttpSaveShipperManage({
                ...this.formData,
			}).then(res => {
				this.loading = false;
                this.$Message.success(res.message)
                if(!this.sourceType){
                    this.onCancel();
                }else{
                    this.$emit('on-success');
                }
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			})
		},
	}
};
</script>
